<template>
  <div class="body">
    <catshit-header active-index="2"></catshit-header>
    <div class="main">
      <el-card>
        <h4 style="margin: 10px">全部类型</h4>
        <el-tag class="tags" type="success" v-for="(item,index) in typeNames" @click="setTypeName(index)">{{item}}</el-tag>
<!--        <el-divider></el-divider>-->
<!--        <h4 style="margin: 10px">热门人物</h4>-->
<!--        <el-tag class="tags" v-for="(item,index) in starNames" @click="setStarName(index)">{{item}}</el-tag>-->
        <el-divider></el-divider>
        <h4 style="margin: 10px">当前浏览</h4>
        <el-tag class="tags" type="success" v-if="toSubmit.typeNames!==''" @click="toSubmit.typeNames=''"> {{toSubmit.typeNames}} </el-tag>
      </el-card>
      <film-list :film-list="filmList"></film-list>
    </div>
  </div>
</template>

<script>
  import CatshitHeader from "../../components/CatshitHeader";
  import FilmList from "../../components/FilmList";
  export default {
    name: "ClassView",
    components: {FilmList, CatshitHeader},
    data(){
      return{
        /*返回影片的类型*/
        typeNames:['风景','游乐','美食','文化','历史','城市','自然','人文'],
        toSubmit:{
          typeNames:'',
        },
        /*后端返回的列表绑定到这里*/
        filmList:[],
      }
    },
    created() {
    },
    mounted() {
      this.searchByClass();
    },
    methods:{
      async searchByClass(){

        this.$axios.post('/searchbyclass',{'type':this.toSubmit.typeNames}).then(res=>{
          if(res.data.code){
            this.$message.error(res.data.msg)
            return
          }
          this.filmList=res.data.msg
        })
      },
      setTypeName(param){
        this.toSubmit.typeNames=this.typeNames[param];
        this.searchByClass()
      },
      setStarName(param){
        this.toSubmit.starNames=this.starNames[param];
        let data;
        if(this.toSubmit.typeNames == ""){
          data = {
            condition:{"film_actor":this.toSubmit.starNames}
          }
        }else{
          data = {
            condition:{"film_type":this.toSubmit.typeNames,"film_actor":this.toSubmit.starNames}
          }
        }
        this.$axios.post('film/film/list', data).then((res) => {
          if (res.data.code === 0) {
            this.filmList = res.data.data.info;
          } else {
            alert("出错啦！")
          }
        })
      }
    }

  }
</script>

<style scoped>
  .body{
    display: flex;
    background-color: aliceblue;
    justify-content: center;
  }
  .main{
    margin-top: 60px;
    width: 70%;
    background-color: white;
  }
  .tags{
    cursor: pointer;
    margin: 10px;
  }
</style>
